<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>
        blogs
    </title>
    
<link rel="stylesheet" href="/libs/highlight/styles/monokai-sublime.css">

    
<link rel="stylesheet" href="/libs/font-awesome/css/font-awesome.min.css">

    
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 4.2.0"></head>

<body id="bodyx">
    <div class="hd posts">
    <a href="/index.html"><i class="fa fa-reply replay-btn" aria-hidden="true"></i></a>
    <div class="post-title">
        <p>
            学习ES6语法(3)
        </p>
        <hr>
    </div>
    <div class="post-content">
        <h1 id="三、变量的解构解析"><a href="#三、变量的解构解析" class="headerlink" title="三、变量的解构解析"></a>三、变量的解构解析</h1><ul>
<li><p>说明：ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构赋值在实际开发中可以大量减少我们的代码量，并且让我们的程序结构更清晰。也许你还是不太明白，那先来一个最简单的数组解构赋值来进行赋值</p>
</li>
<li><p><strong>数组的解构解析</strong></p>
<ul>
<li><strong>简单解构解析</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">以前的赋值方式</span><br><span class="line"><span class="keyword">let</span> a = <span class="number">1</span></span><br><span class="line"><span class="keyword">let</span> b = <span class="number">2</span></span><br><span class="line"><span class="keyword">let</span> c = <span class="number">3</span></span><br><span class="line"></span><br><span class="line">数组解构解析</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> [a,b,c] = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line"></span><br><span class="line">从数组中提取值，按照位置的对象关系对变量赋值。</span><br></pre></td></tr></table></figure>

<ul>
<li><p><strong>数组模式和赋值模式统一</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">简单的理解为等号左边和等号右边的形式要统一，如果不统一解构将失败</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> [a,b,[a,c],c] = [<span class="number">1</span>,<span class="number">2</span>,[<span class="number">1</span>,<span class="number">2</span>],<span class="number">5</span>]</span><br><span class="line"></span><br><span class="line">如果等号两边形式不一样，很可能获得<span class="literal">undefined</span>或者直接报错</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>解构的默认值</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">结构解析允许可以赋一个默认值</span><br><span class="line"><span class="keyword">let</span> [foo = <span class="literal">true</span>] =[];</span><br><span class="line"><span class="built_in">console</span>.log(foo); <span class="comment">//控制台打印出true</span></span><br><span class="line"></span><br><span class="line">多个值给一个默认参数，并给未赋值的参数赋值</span><br><span class="line"><span class="keyword">let</span> [a,b=<span class="string">"JS"</span>]=[<span class="string">'JavaScript'</span>]</span><br><span class="line"><span class="built_in">console</span>.log(a+b); <span class="comment">// JavaScriptJs</span></span><br><span class="line"></span><br><span class="line">需要注意的是<span class="literal">undefined</span>和<span class="literal">null</span>的区别</span><br><span class="line"><span class="keyword">let</span> [a,b=<span class="string">"JS"</span>]=[<span class="string">'技术'</span>,<span class="literal">undefined</span>];</span><br><span class="line"><span class="built_in">console</span>.log(a+b); <span class="comment">//控制台显示“技术JS”</span></span><br><span class="line"></span><br><span class="line">b有一个默认值，在没有重新被赋值时，这个<span class="literal">undefined</span>是一个空，什么都没有，只是占了一个位置</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> [a,b=<span class="string">"js"</span>] = [<span class="string">"Java"</span>,<span class="literal">null</span>]</span><br><span class="line"><span class="built_in">console</span>.log(a+b) <span class="comment">// Javanull</span></span><br><span class="line"><span class="literal">null</span>相当于有值，但是值是一个<span class="literal">null</span>，所以b并没有取默认值，而是解析成了<span class="literal">null</span></span><br></pre></td></tr></table></figure>



</li>
</ul>
</li>
</ul>
<ul>
<li><p><strong>对象的解构赋值</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">解析不仅可以对数组，还可以用于对象实现</span><br><span class="line"><span class="keyword">let</span> &#123;foo,bar&#125; = &#123;<span class="attr">foo</span>:<span class="string">'haha'</span>,<span class="attr">bar</span>:<span class="string">"hehe"</span>&#125;</span><br><span class="line"><span class="built_in">console</span>.log(foo+bar) <span class="comment">//hahahehe</span></span><br><span class="line">注意：对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>圆括号的使用</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">如果在解构之前就定义了变量，这时候你再解构会出现问题。下面是错误的代码，编译会报错</span><br><span class="line"><span class="keyword">let</span> foo;</span><br><span class="line">&#123;foo&#125; = &#123;<span class="attr">foo</span>:<span class="string">'js'</span>&#125;</span><br><span class="line"><span class="built_in">console</span>.log(foo)  <span class="comment">//编译出现错误</span></span><br><span class="line"></span><br><span class="line">要解决报错，使程序正常，我们这时候只要在解构的语句外边加一个圆括号就可以了</span><br><span class="line"><span class="keyword">let</span> foo;</span><br><span class="line">(foo = &#123;<span class="attr">foo</span>:<span class="string">'js'</span>&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(foo) <span class="comment">// js</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">所以对象一定要使用大括号包裹</span><br><span class="line"><span class="keyword">let</span> foo;</span><br><span class="line">foo = &#123;<span class="attr">foo</span>:<span class="string">"js"</span>&#125;  </span><br><span class="line"><span class="built_in">console</span>.log(foo) <span class="comment">//&#123;ccc:"js"，__proto__：object &#125; 按照一个对象的方式输出</span></span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>字符串解构</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象</span><br><span class="line"></span><br><span class="line">let [a,b,c] = <span class="string">"str"</span></span><br><span class="line">console.log(a) <span class="comment">//s</span></span><br><span class="line">console.log(b) <span class="comment">//t</span></span><br><span class="line">console.log(c) <span class="comment">//r</span></span><br><span class="line"></span><br><span class="line">字符串的解析就是和定义的数组每个key进行对应，根据key的位置来获取value的位置 key:value</span><br></pre></td></tr></table></figure></li>
</ul>

    </div>
    
        <hr class="fhr">
        <div id="vcomments"></div>
    
</div>
    <div class="footer" id="footer">
    <p>Copyright © 2020 <a class="flink" href="https://hexo.io" target="_blank" rel="noopener">Hexo</a>-<a class="flink" href="https://github.com/sanjinhub/hexo-theme-geek" target="_blank" rel="noopener">Geek</a>.
        <label class="el-switch el-switch-green el-switch-sm" style="vertical-align: sub;">
            <input type="checkbox" name="switch" id="update_style">
            <span class="el-switch-style"></span>
        </label>
<!--         <script type="text/javascript">
        var cnzz_protocol = (("https:" == document.location.protocol) ? "https://" : "http://");
        document.write(unescape("%3Cspan id='cnzz_stat_icon_1278548644'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "v1.cnzz.com/stat.php%3Fid%3D1278548644%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));
        </script> -->
    </p>
</div>
<input type="hidden" id="web_style" value="black">
<input type="hidden" id="valine_appid" value="oU6aM6U9xOv4LHEQLo3LLROT-gzGzoHsz">
<input type="hidden" id="valine_appKey" value="TbfimrkuMCSYC9BPMRdOqKga">

<script src="/libs/jquery.min.js"></script>


<script src="/libs/highlight/highlight.pack.js"></script>

<script src='//cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js'></script>

<script src="/js/js.js"></script>

<style type="text/css">
.v * {
    color: #698fca;
}

.v .vlist .vcard .vhead .vsys {
    color: #3a3e4a;
}

.v .vlist .vcard .vh .vmeta .vat {
    color: #638fd5;
}

.v .vlist .vcard .vhead .vnick {
    color: #6ba1ff;
}

.v a {
    color: #8696b1;
}

.v .vlist .vcard .vhead .vnick:hover {
    color: #669bfc;
}
</style>
</body>

</html>